@import '../common/main.sass'

.qribbon__horizontal--left.leaf-bottom
  &::before
    @include __qribbon__pseudo--before-after
    border-left: $qribbon-width solid transparent
    left: 0

.qribbon__horizontal--left.leaf-top
  &::before
    @include __qribbon__pseudo--before-after
    border-top: $qribbon-width solid transparent
    border-right: $qribbon-width solid var(--qribbon-leaf-color, black)
    top: $qribbon-negative-width
    left: 0

.qribbon__horizontal--right.leaf-bottom
  &::before
    @include __qribbon__pseudo--before-after
    border-right: $qribbon-width solid transparent
    right: 0

.qribbon__horizontal--right.leaf-top
  &::before
    @include __qribbon__pseudo--before-after
    border-top: $qribbon-width solid transparent
    border-left: $qribbon-width solid var(--qribbon-leaf-color, black)
    top: $qribbon-negative-width
    right: 0

.qribbon__horizontal--left-full.leaf-bottom,
.qribbon__horizontal--right-full.leaf-bottom
  &::before
    @include __qribbon__pseudo--before-after
    border-left: $qribbon-width solid transparent
    left: 0

  &::after
    @include __qribbon__pseudo--before-after
    border-right: $qribbon-width solid transparent
    right: 0

.qribbon__horizontal--left-full.leaf-top,
.qribbon__horizontal--right-full.leaf-top
  &::before
    @include __qribbon__pseudo--before-after
    border-top: $qribbon-width solid transparent
    border-right: $qribbon-width solid var(--qribbon-leaf-color, black)
    top: $qribbon-negative-width
    left: 0

  &::after
    @include __qribbon__pseudo--before-after
    border-top: $qribbon-width solid transparent
    border-left: $qribbon-width solid var(--qribbon-leaf-color, black)
    top: $qribbon-negative-width
    right: 0

%qribbon__horizontal--left,
%qribbon__horizontal--right
  padding: 5px 12px
  background: var(--qribbon-background-color, black)
  color: var(--qribbon-text-color, white)
  z-index: 1
  position: relative

.qribbon__horizontal--left
  @extend %qribbon__horizontal--left
  left: $qribbon-negative-width
  right: inherit

.qribbon__horizontal--right
  @extend %qribbon__horizontal--right
  margin-right: $qribbon-negative-width

.qribbon__horizontal--left-full,
.qribbon__horizontal--right-full
  @extend %qribbon__horizontal--left, %qribbon__horizontal--right
  left: $qribbon-negative-width
  flex-grow: 1
  margin-right: $qribbon-negative-width*2

[class*=horizontal--left].decorate-point-in,
[class*=horizontal--right].decorate-point-in
  &::after
    content: ""
    display: block
    position: absolute
    right: -12px
    top: 0
    bottom: 0
    border-left: 12px solid transparent
    border-right: 12px solid transparent
    border-top: 15px solid var(--qribbon-background-color, black)
    border-bottom: 15px solid var(--qribbon-background-color, black)

[class*=horizontal--right].decorate-point-in
  &::after
    right: inherit
    left: -12px
    border-left: 12px solid transparent
    border-right: 12px solid transparent
    border-top: 15px solid var(--qribbon-background-color, black)
    border-bottom: 15px solid var(--qribbon-background-color, black)

[class*=horizontal--left].decorate-point-out,
[class*=horizontal--right].decorate-point-out
  &::after
    content: ""
    display: block
    position: absolute
    bottom: 0
    top: 0
    right: -24px
    border-top: 15px solid transparent
    border-bottom: 15px solid transparent
    border-right: 12px solid transparent
    border-left: 12px solid var(--qribbon-background-color, black)

[class*=horizontal--right].decorate-point-out
  &::after
    left: -24px
    right: inherit
    border-top: 15px solid transparent
    border-bottom: 15px solid transparent
    border-left: 12px solid transparent
    border-right: 12px solid var(--qribbon-background-color, black)

[class*=horizontal--left].decorate-rounded-in
  padding-right: 24px
  background: radial-gradient(circle at right, transparent 15px, var(--qribbon-background-color, black) 16px)

[class*=horizontal--right].decorate-rounded-in
  padding-left: 24px
  background: radial-gradient(circle at left, transparent 15px, var(--qribbon-background-color, black) 16px)

[class*=horizontal--left].decorate-rounded-out
  border-top-right-radius: 15px
  border-bottom-right-radius: 15px

[class*=horizontal--right].decorate-rounded-out
  border-top-left-radius: 15px
  border-bottom-left-radius: 15px
